<template>
  <div class="body-bg">
    <van-nav-bar>
      <template #title>
        <h3>消息中心</h3>
      </template>
      <template #right>
        <!-- <van-icon name="setting" style="color: bolack; font-size: 20px" /> -->
        <van-icon name="setting-o" style="font-size: 22px" />
      </template>
    </van-nav-bar>
    <!-- 服务号 -->
    <van-tabs v-model="activeName">
      <van-tab title="服务号" name="a">
        <div>
          <p>切换到列表</p>
          <van-cell
            :border="false"
            title="滴滴快车"
            value="9分钟前"
            style="font-size: 18px"
          />
          <van-cell
            title="点我！打车更省钱"
            is-link
            style="margin: 2px 0; font-size: 17px"
          />
          <van-cell
            title="邀请好友助力，一起享出行优惠"
            is-link
            style="margin: 2px 0; font-size: 17px"
          />
          <van-collapse v-model="activeNames">
            <van-collapse-item title="还有4条消息" name="2">
              <div>消息1</div>
              <div>消息2</div>
              <div>消息3</div>
              <div>消息4</div>
            </van-collapse-item>
          </van-collapse>
          <van-cell
            :border="false"
            title="滴滴公交"
            value="1天前"
            style="margin-top: 10px; font-size: 18px"
          />
          <img src="@/assets/图片1.png" alt="" style="width: 100%" />
        </div>
      </van-tab>
      <!-- 对话 -->
      <van-tab title="对话" name="b">
        <van-empty
          class="custom-image"
          image="https://img.yzcdn.cn/vant/custom-empty-image.png"
          description="还没有对话消息"
        />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "a",
      activeNames: ["1"],
    };
  },
};
</script>

<style>
.body-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow-y: auto;
  background: #f0f0f0;
}
p {
  font-size: 18px;
  padding-left: 20px;
}
.custom-image .van-empty__image {
  width: 90px;
  height: 90px;
  margin-top: 150px;
}
</style>